<template>
  <view>
    <view class="content">
      <uni-forms :model="form" :rules="rules" ref="formRef">
        <!-- 表单内容 -->
        <uni-forms-item name="receiver" class="form-item">
          <text class="label">收货人</text>
          <input
            class="input"
            placeholder="请填写收货人姓名"
            v-model="form.receiver"
          />
        </uni-forms-item>
        <uni-forms-item name="contact" class="form-item">
          <text class="label">手机号码</text>
          <input
            class="input"
            placeholder="请填写收货人手机号码"
            v-model="form.contact"
          />
        </uni-forms-item>
        <uni-forms-item name="fullLocation" class="form-item">
          <text class="label">所在地区</text>
          <picker
            @change="changeRegion"
            class="picker"
            mode="region"
            :value="form.fullLocation && form.fullLocation.split(' ')"
          >
            <view v-if="form.fullLocation">{{ form.fullLocation }}</view>
            <view v-else class="placeholder">请选择省/市/区(县)</view>
          </picker>
        </uni-forms-item>
        <uni-forms-item name="address" class="form-item">
          <text class="label">详细地址</text>
          <input
            v-model="form.address"
            class="input"
            placeholder="街道、楼牌号等信息"
            value=""
          />
        </uni-forms-item>
        <view class="form-item">
          <label class="label">设为默认地址</label>
          <switch
            class="switch"
            color="#27ba9b"
            @change="changeSwitch"
            :checked="form.isDefault === 1"
          />
        </view>
      </uni-forms>
    </view>
    <!-- 提交按钮 -->
    <button class="button" @click="saveAddress">保存并使用</button>
  </view>
</template>

<script>
import {
  createAddressApi,
  getMemberAddressByIdAPI,
  putMemberAddressByIdAPI,
} from "@/service/address";

export default {
  data() {
    return {
      form: {
        receiver: "", // 收货人
        contact: "", // 联系方式
        fullLocation: "", // 省市区(前端展示)
        provinceCode: "", // 省份编码(后端参数)
        cityCode: "", // 城市编码(后端参数)
        countyCode: "", // 区/县编码(后端参数)
        address: "", // 详细地址
        isDefault: 0, // 默认地址，1为是，0为否
      },
      rules: {
        receiver: {
          rules: [{ required: true, errorMessage: "请输入收货人姓名" }],
        },
        contact: {
          rules: [
            { required: true, errorMessage: "请输入联系方式" },
            {
              pattern: "^1[3-9]\\d{9}$",
              errorMessage: "手机号格式不正确",
            },
          ],
        },
        fullLocation: {
          rules: [{ required: true, errorMessage: "请选择所在地区" }],
        },
        address: {
          rules: [{ required: true, errorMessage: "请选择详细地址" }],
        },
      },
    };
  },
  onLoad({ id }) {
    uni.setNavigationBarTitle({
      title: id ? "修改地址" : "新增地址",
    });
    // 把id参数保存到当前实例
    this.id = id;
    // 如果id存在的时候调用接口
    if (id) this.getDetail(id);
  },
  methods: {
    async getDetail(id) {
      const { result } = await getMemberAddressByIdAPI(id);
      this.form = result;
    },
    async saveAddress() {
      await this.$refs.formRef.validate();
      const { fullLocation, ...data } = this.form;

      if (this.id) {
        //   编辑
        await putMemberAddressByIdAPI(this.id, data);
      } else {
        //   新增
        await createAddressApi(data);
        //   1、成功的提示
      }
      // 场景的区分
      // 是否有id参数

      uni.showToast({
        title: this.id ? "修改成功" : "新增成功",
        duration: 1500,
      });

      setTimeout(() => {
        uni.navigateTo({
          url: "/pagesMember/address/address",
        });
      }, 1500);
      //   2、跳转到列表页面
    },
    changeSwitch(e) {
      this.form.isDefault = e.detail.value ? 1 : 0;
    },
    changeRegion(e) {
      this.form.fullLocation = e.detail.value.join(" ");
      // 获取省市区的code
      const [provinceCode, cityCode, countyCode] = e.detail.code;
      Object.assign(this.form, { provinceCode, cityCode, countyCode });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f4f4f4;
}

.content {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;

  .form-item,
  .uni-forms-item {
    display: flex;
    align-items: center;
    min-height: 96rpx;
    padding: 25rpx 10rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;
    margin-bottom: 0;

    // 调整 uni-forms 样式
    .uni-forms-item__content {
      display: flex;
    }

    .uni-forms-item__error {
      margin-left: 200rpx;
    }

    &:last-child {
      border: none;
    }

    .label {
      width: 200rpx;
      color: #333;
    }

    .input {
      flex: 1;
      display: block;
      height: 46rpx;
    }

    .switch {
      position: absolute;
      right: -20rpx;
      transform: scale(0.8);
    }

    .picker {
      flex: 1;
    }

    .placeholder {
      color: #808080;
    }
  }
}

.button {
  height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>
